// src/pages/qualityStandard/ItemManage.vue
<template>
	<div class="item-manage">
		<el-card>
			<template #header>
				<div class="header-bar">
					<span>质检项管理</span>
					<el-button type="primary" size="small" @click="openDialog('add')">新增质检项</el-button>
				</div>
			</template>

			<el-table :data="itemList" border stripe>
				<el-table-column prop="name" label="名称" />
				<el-table-column prop="requirement" label="要求" />
				<el-table-column prop="method" label="方法" />
				<el-table-column prop="position" label="位置" />
				<el-table-column prop="aql" label="AQL策略" />
				<el-table-column prop="type" label="质检类型" />
				<el-table-column label="操作" width="160">
					<template #default="scope">
						<el-button size="small" @click="openDialog('edit', scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="deleteItem(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<el-dialog :title="dialogTitle" v-model="dialogVisible" width="500px">
			<el-form :model="form" label-width="100px">
				<el-form-item label="名称">
					<el-input v-model="form.name" />
				</el-form-item>
				<el-form-item label="要求">
					<el-input v-model="form.requirement" />
				</el-form-item>
				<el-form-item label="方法">
					<el-input v-model="form.method" />
				</el-form-item>
				<el-form-item label="位置">
					<el-input v-model="form.position" />
				</el-form-item>
				<el-form-item label="AQL策略">
					<el-input v-model="form.aql" />
				</el-form-item>
				<el-form-item label="质检类型">
					<el-select v-model="form.type">
						<el-option label="原材料质检" value="原材料质检" />
						<el-option label="成品质检" value="成品质检" />
					</el-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submitForm">保存</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import { ref, provide } from 'vue'

export default {
	setup() {
		const itemList = ref([
			{
				name: '尺寸检测', requirement: '±2mm', method: '物理检测', position: '边缘', aql: 'AQL 1.5', type: '原材料质检'
			},
			{
				name: '强度测试', requirement: '≥20MPa', method: '力学检测', position: '中心', aql: 'AQL 2.5', type: '成品质检'
			},
			{
				name: '厚度测量', requirement: '≥5mm', method: '物理检测', position: '四角', aql: 'AQL 1.0', type: '原材料质检'
			},
			{
				name: '成分分析', requirement: '≤5%', method: '化学分析', position: '整体', aql: 'AQL 2.5', type: '原材料质检'
			},
			{
				name: '抗压测试', requirement: '≥15MPa', method: '力学检测', position: '中部', aql: 'AQL 1.0', type: '成品质检'
			},
			{
				name: '表面粗糙度', requirement: '≤0.8μm', method: '视觉检测', position: '正面', aql: 'AQL 0.65', type: '成品质检'
			},
			{
				name: '密度测定', requirement: '1.5~1.7 g/cm³', method: '物理检测', position: '整体', aql: 'AQL 1.0', type: '原材料质检'
			},
			{
				name: '吸水率测试', requirement: '≤8%', method: '物理检测', position: '底部', aql: 'AQL 2.5', type: '原材料质检'
			},
			{
				name: '热膨胀系数', requirement: '≤10×10⁻⁶/K', method: '热学测试', position: '垂直方向', aql: 'AQL 1.5', type: '成品质检'
			},
			{
				name: '抗折强度', requirement: '≥12MPa', method: '力学检测', position: '短边', aql: 'AQL 2.5', type: '成品质检'
			}
		])

		provide('qualityItemList', itemList)

		const dialogVisible = ref(false)
		const dialogTitle = ref('')
		const form = ref({})
		const currentIndex = ref(-1)

		const openDialog = (type, row) => {
			dialogTitle.value = type === 'add' ? '新增质检项' : '编辑质检项'
			dialogVisible.value = true
			if (type === 'edit') {
				form.value = { ...row }
				currentIndex.value = itemList.value.findIndex(i => i.name === row.name)
			} else {
				form.value = { name: '', requirement: '', method: '', position: '', aql: '', type: '' }
				currentIndex.value = -1
			}
		}

		const submitForm = () => {
			if (currentIndex.value >= 0) {
				itemList.value[currentIndex.value] = { ...form.value }
			} else {
				itemList.value.push({ ...form.value })
			}
			dialogVisible.value = false
		}

		const deleteItem = (row) => {
			itemList.value = itemList.value.filter(i => i.name !== row.name)
		}

		return {
			itemList,
			dialogVisible,
			dialogTitle,
			form,
			openDialog,
			submitForm,
			deleteItem
		}
	}
}
</script>

<style scoped>
.item-manage {
	padding: 20px;
}

.header-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
	font-size: 16px;
}
</style>
